<template>
  <el-container class="main_con">
    <div class="filter_con ds_block">
      <el-button type="primary" v-has size="medium" @click="addItem">新增打印机</el-button>
      <el-button type="primary" size="medium" @click="refresh" style="margin-left:15px">刷新列表</el-button>
    </div>
    <div class="list_con">
      <el-table 
         
        :data="list"
        element-loading-text="" fit highlight-current-row>
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="name" label="打印机名称"></el-table-column>
        <!-- <el-table-column prop="code" label="终端号"></el-table-column> -->
        <el-table-column prop="create_time" label="创建时间"></el-table-column>
        <el-table-column prop="name" label="是否默认" width="120px">
          <template slot-scope="scope">
            {{scope.row.default ? '默认' : ''}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button v-has v-if="scope.row.default == 0" type="text" @click="itemDefault(scope.row.id)">设为默认</el-button>
            <el-button v-has type="text" @click="itemEdit(scope.row.id)">编辑</el-button>
            <el-button v-has type="text" @click="itemDel(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="table_footer" style="flex-direction: row-reverse;" v-show="total != 0">
        <el-pagination 
          @current-change="changePage" 
          class="pages" background hide-on-single-page layout="prev, pager, next" :total="total">
        </el-pagination>
      </div> -->
    </div>
    <el-dialog :title="title" destroy-on-close :visible.sync="showPrinter" width="30%">
      <receiptPrinterItem ref="printerComponent" @success="editSuccess"></receiptPrinterItem>
    </el-dialog>
  </el-container>
</template>

<script>
import {
  getReceiptPrinterList,
  delReceiptPrinter,
  editRecPrinterDefault
} from '@/api/shop/print';
import receiptPrinterItem from './components/receiptPrinterItem';

export default {
  data(){
    return {
      title:'设置打印机',
      showPrinter:false,
      //page:1,
      //size:10,
      //total:0,
      isLoading: false,
      list:[]
    }
  },
  components: {
    receiptPrinterItem
  },
  mounted(){
    this.searchList();
  },
  methods:{
    //刷新数据
    refresh(){
      this.getDataList();
    },
    //新增/编辑成功回调
    editSuccess(){
      this.showPrinter = false;
      this.getDataList();
    },
    //新增记录
    addItem(){
      //this.$router.push('/print/template/receiptPrinterItem');
      this.title = '新增打印机';
      this.showPrinter = true;
    },
    //设为默认
    itemDefault(id){
      this.isLoading = true;
      editRecPrinterDefault(id).then(res => {
        this.isLoading = false;
        this.getDataList();
      }).catch(e => {
        this.isLoading = false;
      })
    },
    //编辑记录
    itemEdit(id){
      this.title = '编辑打印机';
      this.showPrinter = true;
      this.$nextTick(_ => {
        this.$refs.printerComponent.init(id);
      });
      // this.$router.push({
      //   path:'/print/template/receiptPrinterItem',
      //   query:{
      //     id:id,
      //     k:Math.random()
      //   }
      // })
    },
    //查询数据
    searchList(){
      //复制查询对象
      //this.objTemp = Object.assign({},this.obj);
      this.getDataList();
    },
    //查询数据本体
    getDataList(){
      this.isLoading = true;
      getReceiptPrinterList().then(res => {
        this.isLoading = false;
        this.list = res.msg;
      }).catch(e => {
        this.isLoading = false;
      });
    },
    //删除记录
    itemDel(id){
      this.$confirm('是否要删除该模板?').then(_ => {
        this.isLoading = true;
        delReceiptPrinter(id).then(res => {
          this.isLoading = false;
          this.getDataList();
        }).catch(e => {
          this.isLoading = false;
        });
      }).catch(p => {
        //empty
      });
    }
  }
}
</script>

<style lang="scss" scoped></style>